<template>

  <div class="nav">
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='1'" theme="dark" @open="handleOpen" @close="handleClose">
      <router-link v-if="nav[1].subMenus[2]" :to="{name: 'memberCentre'}"><el-menu-item index="1-1">{{nav[1].subMenus[2].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[3]" :to="{name: 'memberFile'}"><el-menu-item index="1-2">{{nav[1].subMenus[3].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[4]" :to="{name: 'memberCheckIn'}"><el-menu-item index="1-3">{{nav[1].subMenus[4].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[5]" :to="{name: 'membersRetired'}"><el-menu-item index="1-4">{{nav[1].subMenus[5].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[6]" :to="{name: 'bedChanges'}"><el-menu-item index="1-5">{{nav[1].subMenus[6].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[7]" :to="{name: 'packageChanges'}"><el-menu-item index="1-6">{{nav[1].subMenus[7].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[8]" :to="{name: 'processConfiguration'}"><el-menu-item index="1-7">{{nav[1].subMenus[8].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[9]" :to="{name: 'review'}"><el-menu-item index="1-9">{{nav[1].subMenus[9].name}}</el-menu-item></router-link>
      <router-link v-if="nav[1].subMenus[44]" :to="{name: 'homeBased'}"><el-menu-item index="1-44">{{nav[1].subMenus[44].name}}</el-menu-item></router-link>
    </el-menu>
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='2'" theme="dark" @open="handleOpen" @close="handleClose">
      <router-link v-if="nav[10].subMenus[11]" :to="{name: 'serviceItems'}"><el-menu-item index="2-1">{{nav[10].subMenus[11].name}}</el-menu-item></router-link>
      <router-link v-if="nav[10].subMenus[13]" :to="{name: 'servicePlanTemplate'}"><el-menu-item index="2-3">{{nav[10].subMenus[13].name}}</el-menu-item></router-link>
      <router-link v-if="nav[10].subMenus[12]" :to="{name: 'servicePlanList'}"><el-menu-item index="2-2">{{nav[10].subMenus[12].name}}</el-menu-item></router-link>
      <router-link v-if="nav[10].subMenus[14]" :to="{name: 'serviceReservation'}"><el-menu-item index="2-4">{{nav[10].subMenus[14].name}}</el-menu-item></router-link>
      <router-link v-if="nav[10].subMenus[15]" :to="{name: 'serviceTracking'}"><el-menu-item index="2-5">{{nav[10].subMenus[15].name}}</el-menu-item></router-link>
      <router-link v-if="nav[10].subMenus[16]" :to="{name: 'serviceRecord'}"><el-menu-item index="2-6">{{nav[10].subMenus[16].name}}</el-menu-item></router-link>
      <router-link v-if="nav[10].subMenus[17]" :to="{name: 'workPlan'}"><el-menu-item index="2-7">{{nav[10].subMenus[17].name}}</el-menu-item></router-link>
        <router-link v-if="nav[10].subMenus[47]" :to="{name: 'careLeaveSeeting'}"><el-menu-item index="2-8">{{nav[10].subMenus[47].name}}</el-menu-item></router-link>
    </el-menu>
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='3'" theme="dark" @open="handleOpen" @close="handleClose">
        <router-link v-if="nav[18].subMenus[19]" :to="{name: 'healthAssessment'}"><el-menu-item index="3-1">{{nav[18].subMenus[19].name}}</el-menu-item></router-link>
        <router-link v-if="nav[18].subMenus[20]" :to="{name: 'healthPlan'}"><el-menu-item index="3-2">{{nav[18].subMenus[20].name}}</el-menu-item></router-link>
        <router-link v-if="nav[18].subMenus[21]" :to="{name: 'assessmentScale'}"><el-menu-item index="3-3">{{nav[18].subMenus[21].name}}</el-menu-item></router-link>
        <router-link v-if="nav[18].subMenus[45]" :to="{name: 'healthMonitor'}"><el-menu-item index="3-4">{{nav[18].subMenus[45].name}}</el-menu-item></router-link>
        <router-link v-if="nav[18].subMenus[23]" :to="{name: 'healthRecords'}"><el-menu-item index="3-5">{{nav[18].subMenus[23].name}}</el-menu-item></router-link>
        <router-link v-if="nav[18].subMenus[48]" :to="{name: 'outBedInduction'}"><el-menu-item index="3-6">{{nav[18].subMenus[48].name}}</el-menu-item></router-link>
        <router-link v-if="nav[18].subMenus[49]" :to="{name: 'intelligentHW'}"><el-menu-item index="3-7">{{nav[18].subMenus[49].name}}</el-menu-item></router-link>
        <!--<router-link v-if="nav[18].subMenus[58]" :to="{name: 'positionManage'}"><el-menu-item index="3-8">{{nav[18].subMenus[58].name}}</el-menu-item></router-link>-->
        <router-link :to="{name: 'positionManage'}"><el-menu-item index="3-8">定位管理</el-menu-item></router-link>
    </el-menu>
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='4'" theme="dark" @open="handleOpen" @close="handleClose">
      <router-link v-if="nav[24].subMenus[25]" :to="{name: 'financialCenter'}"><el-menu-item index="4-1">{{nav[24].subMenus[25].name}}</el-menu-item></router-link>
      <router-link v-if="nav[24].subMenus[26]" :to="{name: 'financialFlowing'}"><el-menu-item index="4-2">{{nav[24].subMenus[26].name}}</el-menu-item></router-link>
      <router-link v-if="nav[24].subMenus[27]" :to="{name: 'financialAllocate'}"><el-menu-item index="4-3">{{nav[24].subMenus[27].name}}</el-menu-item></router-link>
      <router-link v-if="nav[24].subMenus[28]" :to="{name: 'financialSetup'}"><el-menu-item index="4-4">{{nav[24].subMenus[28].name}}</el-menu-item></router-link>
    </el-menu>
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='5'" theme="dark" @open="handleOpen" @close="handleClose">
      <router-link v-if="nav[29].subMenus[30]" :to="{name: 'business'}"><el-menu-item index="5-1">{{nav[29].subMenus[30].name}}</el-menu-item></router-link>
      <router-link v-if="nav[29].subMenus[31]" :to="{name: 'staff'}"><el-menu-item index="5-2">{{nav[29].subMenus[31].name}}</el-menu-item></router-link>
      <router-link v-if="nav[29].subMenus[32]" :to="{name: 'team'}"><el-menu-item index="5-3">{{nav[29].subMenus[32].name}}</el-menu-item></router-link>
      <router-link v-if="nav[29].subMenus[33]" :to="{name: 'room'}"><el-menu-item index="5-4">{{nav[29].subMenus[33].name}}</el-menu-item></router-link>
      <router-link v-if="nav[29].subMenus[34]" :to="{name: 'org'}"><el-menu-item index="5-5">{{nav[29].subMenus[34].name}}</el-menu-item></router-link>
      <router-link v-if="nav[29].subMenus[35]" :to="{name: 'role'}"><el-menu-item index="5-6">{{nav[29].subMenus[35].name}}</el-menu-item></router-link>
        <router-link v-if="nav[29].subMenus[46]" :to="{name: 'departmentSetting'}"><el-menu-item index="5-7">{{nav[29].subMenus[46].name}}</el-menu-item></router-link>

    </el-menu>
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='6'" theme="dark" @open="handleOpen" @close="handleClose">
      <router-link v-if="nav[36].subMenus[37]" :to="{name: 'serviceCenter'}"><el-menu-item index="6-1">{{nav[36].subMenus[37].name}}</el-menu-item></router-link>
      <router-link v-if="nav[36].subMenus[38]" :to="{name: 'visitorRecord'}"><el-menu-item index="6-2">{{nav[36].subMenus[38].name}}</el-menu-item></router-link>
      <router-link v-if="nav[36].subMenus[39]" :to="{name: 'roomDynamic'}"><el-menu-item index="6-3">{{nav[36].subMenus[39].name}}</el-menu-item></router-link>
      <router-link v-if="nav[36].subMenus[40]" :to="{name: 'consultingComplaint'}"><el-menu-item index="6-4">{{nav[36].subMenus[40].name}}</el-menu-item></router-link>
      <router-link v-if="nav[36].subMenus[41]" :to="{name: 'emergencyRescue'}"><el-menu-item index="6-5">{{nav[36].subMenus[41].name}}</el-menu-item></router-link>
      <router-link v-if="nav[36].subMenus[42]" :to="{name: 'inAndOutRegistration'}"><el-menu-item index="6-6">{{nav[36].subMenus[42].name}}</el-menu-item></router-link>
      <router-link v-if="nav[36].subMenus[43]" :to="{name: 'problemReport'}"><el-menu-item index="6-7">{{nav[36].subMenus[43].name}}</el-menu-item></router-link>
    </el-menu>
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='111'" theme="dark" @open="handleOpen" @close="handleClose">
      <router-link :to="{name: 'applySubmit'}"><el-menu-item index="111-1">补助申请提交</el-menu-item></router-link>
      <router-link :to="{name: 'applyExamine'}"><el-menu-item index="111-2">补助申请审核</el-menu-item></router-link>
      <router-link :to="{name: 'applyGrant'}"><el-menu-item index="111-3">补助申请发放</el-menu-item></router-link>
    </el-menu>
    <el-menu :default-active="this.$route.meta.num" v-if="this.$route.meta.no=='112'" theme="dark" @open="handleOpen" @close="handleClose">
      <router-link :to="{name: 'MCManage'}"><el-menu-item index="112-1">优待证管理</el-menu-item></router-link>
      <router-link :to="{name: 'MCReview'}"><el-menu-item index="112-2">优待证审核</el-menu-item></router-link>
    </el-menu>
  </div>
</template>

<script>
  export default {
    methods: {
      init(){

      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    props:["nav"],
    mounted: function () {
      this.init();
    },
  }
</script>

<style>
  body,html{
   height:100%;

  }
  .nav {
    background-color: #21282e;
    align-items: center;
    box-sizing:border-box;
    height: calc(100vh - 50px);
    /*overflow-y: scroll;*/
    color: #ffffff!important;

  }
  .nav>ul{
    width: 100%;
    display: flex;
    flex-direction:column;

  }
  .nav ul li{
    background-color: #21282e!important;
  }
  .nav ul li div.el-menu-item-group__title{
   display: none;
  }
  .nav ul li.el-submenu.is-opened{
    /*background-color: #0cb7c6!important;*/
  }
  .nav ul li.el-menu-item {
    letter-spacing: 1px!important;
    padding: 0px 11px 0px 0px !important;
  }
  .nav ul li.el-menu-item.is-active {
    border-bottom: 1px solid #0cb7c6;
    background-color: #2c3339!important;
    color: #0cb7c6 !important;
  }
  .nav ul li.el-menu-item.is-active:after{
    content: '';
    font-size: 0;
    line-height: 0;
    border-width: 8px;
    border-color:#f5f7fa;
    border-left-width: 0;
    border-style: dashed;
    border-right-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    right: 0px;
    top: 19px;
    z-index: 2;
  }
  .nav ul li.el-menu-item:hover {
    background-color: #2c3339!important;
    color: #0cb7c6 !important;
  }
  .nav ul li a{
    color: #ffffff;
    text-decoration:none;
  }

  .nav ul a:link{
    text-decoration:none;
    text-align: center;
  }
</style>
